<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=480, user-scalable=0" />
    <title>山河图·江东雄心小工具</title>
    <style>
        :root {
            --primary-gray: #353535;
            --secondary-gray: #f5f5f5;
            --major-content-width: 820px;
            font-size: 16px;
        }

        html,
        body {
            height: 100%;
        }

        body {
            margin: 0 auto;
            padding: 0;
            font-size: 1rem;
            font-family: Segoe UI, Helvetica, system-ui, -apple-system, Arial, sans-serif;
            color: var(--primary-gray);
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: auto 1fr;
            place-items: stretch;
            background-color: #fcfcfa;
        }

        h1 {
            font-size: 1.8em;
            text-align: center;
        }

        .second-title {
            margin: 1em auto;
            text-align: center;
            color: #888;
        }

        .top-banner {
            border-block-end: thin solid var(--secondary-gray);
        }

        @media screen and (hover: hover) {
            .top-banner {
                overflow-y: scroll;
            }

            .top-banner::-webkit-scrollbar {
                visibility: hidden;
            }
        }

        .top-banner .topics {
            margin: 0;
            padding: 0;
            margin: 0 auto;
            max-width: var(--major-content-width);
            display: flex;
            align-items: center;
            list-style: none;
        }

        .topics>.topic-item {
            flex: 1 1 0;
        }

        .topics>.topic-item>a {
            display: block;
            padding: .5em 1em;
            text-align: center;
            color: inherit;
            text-decoration: none;
        }

        .topics:not(:hover)>.current-topic,
        .topics>.topic-item:hover {
            text-shadow: var(--primary-gray) 1px 0px 1px;
            background-color: var(--secondary-gray);
        }

        .topics>.current-topic>:any-link {
            cursor: default;
        }

        #mainFrame {
            border: none;
        }
    </style>
</head>

<body>
    <header class="top-banner">
        <nav>
            <ul id="topics" class="topics">
                <li class="topic-item">
                    <a id="talents" target="mainFrame" href="./talent_simulator.html">天赋树</a>
                </li>
                <li class="topic-item">
                    <a id="adventures" target="mainFrame" href="./adventure_overview.html">奇遇表</a>
                </li>
                <li class="topic-item">
                    <a id="tactics" target="mainFrame" href="./tactic_overview.html">战法表</a>
                </li>
                <li class="topic-item">
                    <a id="cards" target="mainFrame" href="./card_overview.html">卡牌组</a>
                </li>
                <li class="topic-item">
                    <a id="skills" target="mainFrame" href="./skill_overview.html">技能组</a>
                </li>
                <li class="topic-item">
                    <a id="fights" target="mainFrame" href="./fight_overview.html">关卡概览</a>
                </li>
            </ul>
        </nav>
    </header>
    <iframe id="mainFrame" name="mainFrame" src="./talent_simulator.html"></iframe>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
            const mainFrame = document.getElementById('mainFrame');
            let curTopicItem = document.querySelector('#topics .current-topic');
            function showTopicContent(topic, pushState = false) {
                const targetTopic = typeof topic === 'string' ? document.getElementById(topic) : topic;
                const targetTopicItem = targetTopic?.parentElement;
                if (!(targetTopic instanceof HTMLAnchorElement) || targetTopicItem?.classList.contains('current-topic')) {
                    return;
                }
                curTopicItem?.classList.remove('current-topic');
                targetTopicItem.classList.add('current-topic');
                curTopicItem = targetTopicItem;
                if (pushState) {
                    history.pushState({ topic: targetTopic.id }, targetTopic.textContent, `#${targetTopic.id}`);
                }
                mainFrame.contentWindow.location.replace(targetTopic.href);
            }
            document.getElementById('topics').addEventListener('click', (event) => {
                const target = event.target;
                if (!target.matches('.topic-item>a[href]')) {
                    return;
                }
                event.preventDefault();
                event.stopPropagation();
                showTopicContent(target, true);
            }, true);
            window.addEventListener('popstate', ({ state }) => {
                showTopicContent(state?.topic ?? 'talents');
            });
            showTopicContent(location.hash?.length > 0 ? location.hash.substring(1) : 'talents');
        });
    </script>
</body>

</html>